<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css" />
    <link rel="stylesheet" href="../css/base.css" />
    <link rel="stylesheet" href="../css/detail.css" />
    <script src="../js/jquery-1.11.3.js"></script>
  </head>
  <body>
    <!-- 头部 -->
    <div class="header">
      <!-- 顶部导航栏 -->
      <div class="nav">
        <div class="nav_container">
          <ul class="nav_left">
            <li>
              <a href="index.html">
                <s class="home"></s>
                <span>网站首页</span>
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <s class="weixin"></s>
                <span>微信</span>
                <img src="../imgs/index/header/icon_down.png" alt="" />
              </a>
            </li>
            <li>
              <a href="javascript:;">
                <s class="phone"></s>
                <span>手机访问</span>
                <img src="../imgs/index/header/icon_down.png" alt="" />
              </a>
            </li>
          </ul>
          <ul class="nav_right">
            <li><a>Hi,欢迎来到手机商城!</a></li>
            <li><a href="#">登录</a></li>
            <li><a href="#">注册</a></li>
            <li><a href="#">我的订单</a></li>
            <li><a href="#">账户中心</a></li>
            <li><a href="#">商户中心</a></li>
            <li><a href="#">帮助中心</a></li>
          </ul>
        </div>
      </div>
      <!-- 头部搜索 -->
      <div class="headerMiddle">
        <img src="../imgs/index/header/title.png" alt="" />
        <div class="myCart">
          <img src="../imgs/index/header/icon_cartOn.png" alt="" />
          <a href="cart.html">我的购物车</a>
          <img src="../imgs/index/header/bg_upArrow.png" alt="" />
        </div>
      </div>
      <div class="search">
        <input
          type="text"
          class="searchInput"
          placeholder="请输入要搜索的关键词"
        />
        <a href="">搜索</a>
      </div>
      <!-- 头部选项卡 -->
      <ul class="headerTab">
        <li><a href="./index.html">首页</a></li>
        <li><a href="./list.html">全部商品</a></li>
        <li><a href="./list.html">华为</a></li>
        <li><a href="./list.html">荣耀</a></li>
        <li><a href="./list.html">苹果</a></li>
        <li><a href="./list.html">魅族</a></li>
        <li><a href="./list.html">三星</a></li>
        <li><a href="./list.html">OPPO</a></li>
        <li><a href="./list.html">VIVO</a></li>
        <li><a href="./list.html">小米</a></li>
      </ul>
    </div>
    <!-- 位置指示 -->
    <div class="path">
      <span>您现在的位置:</span>
      <ul>
        <li><a href="">首页</a></li>
        <li>&gt;</li>
        <li><a href="">手机品牌</a></li>
        <li>&gt;</li>
        <li><a href="">品牌分类</a></li>
        <li>&gt;</li>
        <li><a href="">华为</a></li>
        <li>&gt;</li>
        <li><a href="">华为 HUAWEI P40 Pro 全网通5G手机 双卡双待</a></li>
      </ul>
    </div>
    <!-- 商品详情主体 -->
    <div class="hbody">
      <div class="hbody_left">
        <!-- 左侧大图 -->
        <div class="bigImg">
          <img src="../imgs/detail/400/400_lg1.jpg" alt="" />
        </div>
        <div class="small_left"></div>
        <div class="small_right"></div>
        <!-- 下方小图导航 -->
        <div class="smallImg">
          <ul id="smallImg"></ul>
        </div>
      </div>
      <div class="hbody_right">
        <p>华为 HUAWEI P40 Pro 全网通5G手机 双卡双待</p>
        <div class="proInfoName">
          <span>麒麟990 5G SoC芯片 5000万超感知徕卡四摄 50倍数字变焦</span>
        </div>
        <!-- 商品价格 -->
        <div class="shop_price">
          <span>商城价:</span>
          <span class="pro_price">¥5988.00</span>
        </div>
        <!-- 商品运费 -->
        <div class="yunfei">
          <span>运费:</span>
          <span>免运费</span>
        </div>
        <!-- 销量 -->
        <div class="sale">
          <span>累计销量</span>
          <span class="count">23</span>
        </div>
        <!-- 选择颜色属性 -->
        <div class="changeColor">
          <span>选择颜色:</span>
          <div class="colorCate">
            <a href="javascript:;">
              <img src="../imgs/detail/30/30_colorList1.jpg" alt="" />
              <span>亮黑色</span>
            </a>
            <a href="javascript:;">
              <img src="../imgs/detail/30/30_colorList2.jpg" alt="" />
              <span>零度白</span>
            </a>
            <a href="javascript:;">
              <img src="../imgs/detail/30/30_colorList3.jpg" alt="" />
              <span>深海蓝</span>
            </a>
            <a href="javascript:;">
              <img src="../imgs/detail/30/30_colorList4.jpg" alt="" />
              <span>冰霜银</span>
            </a>
            <a href="javascript:;">
              <img src="../imgs/detail/30/30_colorList5.jpg" alt="" />
              <span>晨曦金</span>
            </a>
          </div>
        </div>
        <!-- 选择内存 -->
        <div class="changeRom">
          <span>选择内存RAM+ROM</span>
          <div class="RomRam">
            <div>8GB+256GB</div>
            <div>8GB+512GB</div>
            <div>8GB+128GB</div>
          </div>
        </div>
        <!-- 数量及加购 -->
        <div class="addCart">
          <div class="btCount">
            <input type="text" class="input" value="1" id="btInput" />
            <div class="addArrow">
              <a href="javascript:;" id="addNum" class="bt_add"></a>
              <a href="javascript:;" id="cutNum" class="bt_cut"></a>
            </div>
          </div>
          <div class="btCart">
            <a href="javascript:;">加入购物车</a>
            <a href="javascript:;" class="nowBuy">立即购买</a>
          </div>
        </div>
      </div>
    </div>
    <!-- 商品详情 -->
    <div class="detail">
      <!-- 左侧相关商品 -->
      <div class="detail_about">
        <div class="about">
          <span>相关商品</span>
        </div>
        <!-- 推荐商品 -->
        <div class="recom">
          <img src="../imgs/detail/400/400_lg1.jpg" alt="" />
          <p>华为 HUAWEI P40 全网通5G手机 双卡双待</p>
          <a href="javascript:;">¥4288.00</a>
        </div>
      </div>
      <!-- 右侧详情信息 -->
      <div class="introduce">
        <!-- 商品详情导航栏 -->
        <div class="detail_nav">
          <!-- 左边导航 -->
          <ul>
            <li><a href="javascript:;">商品介绍</a></li>
            <li><a href="javascript:;">用户评价</a></li>
            <li><a href="javascript:;">用户咨询</a></li>
            <li><a href="javascript:;">店铺服务详情</a></li>
          </ul>
          <!-- 右边导航 -->
          <div>手机下单更便捷</div>
          <div>加入购物车</div>
        </div>
        <!-- 商品参数 -->
        <div class="detail_info">
          <div class="infoH2">
            <h2><i>商品参数</i></h2>
          </div>
          <img src="../imgs/detail/1.jpg" alt="" />
          <img src="../imgs/detail/2.jpg" alt="" />
          <img src="../imgs/detail/3.jpg" alt="" />
          <img src="../imgs/detail/4.jpg" alt="" />
          <img src="../imgs/detail/5.jpg" alt="" />
          <div class="info_comments">
            <h2>
              <i>用户评论</i>
              <span>USER COMMENTS</span>
            </h2>
          </div>
          <!-- 评论分类 -->
          <div class="comment_cate">
            <ul>
              <li>全部(0)</li>
              <li>好评(0)</li>
              <li>中评(0)</li>
              <li>差评(0)</li>
              <li>晒单(0)</li>
            </ul>
          </div>
          <!-- 评论区 -->
          <div class="comment_info">
            <p>暂无评论</p>
          </div>
          <!-- 用户咨询 -->
          <div class="info_comments">
            <h2>
              <i>用户咨询</i>
              <span>USERS ADVISORY</span>
            </h2>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <div class="footer">
      <ul>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">服务详情</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
      <p>Copyright © 2016 北京熠天海纳科技有限公司 京ICP备16043770号</p>
      <div class="authentication">
        <a href="#"><img src="../imgs/index/footer/bottom01.png" alt="" /></a>
        <a href="#"><img src="../imgs/index/footer/bottom02.png" alt="" /></a>
        <a href="#"><img src="../imgs/index/footer/bottom03.png" alt="" /></a>
      </div>
    </div>
    <script src="../js/detail.js"></script>
  </body>
</html>
